import React from 'react';
import { Modal, Image, Descriptions, Tag, Button, Space, Statistic, Row, Col, Card } from 'antd';
import { EyeOutlined, LinkOutlined, ClockCircleOutlined } from '@ant-design/icons';
import moment from 'moment';

interface BannerPreviewProps {
  visible: boolean;
  banner?: CONTENT.BannerModel;
  onCancel: () => void;
}

const BannerPreview: React.FC<BannerPreviewProps> = ({ visible, banner, onCancel }) => {
  if (!banner) return null;

  // 状态标签颜色映射
  const statusColorMap = {
    active: 'green',
    inactive: 'orange',
    expired: 'red',
  };

  // 位置标签颜色映射
  const positionColorMap = {
    home_top: 'blue',
    home_middle: 'cyan',
    course_top: 'purple',
    activity_top: 'orange',
  };

  // 链接类型映射
  const linkTypeMap = {
    none: '无链接',
    url: '外部链接',
    course: '课程详情',
    activity: '活动详情',
    page: '页面跳转',
  };

  // 位置映射
  const positionMap = {
    home_top: '首页顶部',
    home_middle: '首页中部',
    course_top: '课程页顶部',
    activity_top: '活动页顶部',
  };

  // 状态映射
  const statusMap = {
    active: '启用',
    inactive: '禁用',
    expired: '已过期',
  };

  // 获取链接信息
  const getLinkInfo = () => {
    switch (banner.link_type) {
      case 'url':
        return banner.link_url;
      case 'course':
        return `课程ID: ${banner.link_course_id}`;
      case 'activity':
        return `活动ID: ${banner.link_activity_id}`;
      case 'page':
        return banner.link_page;
      default:
        return '-';
    }
  };

  // 检查是否在有效期内
  const isActive = () => {
    const now = moment();
    const startTime = banner.start_time ? moment(banner.start_time) : null;
    const endTime = banner.end_time ? moment(banner.end_time) : null;
    
    if (startTime && now.isBefore(startTime)) return false;
    if (endTime && now.isAfter(endTime)) return false;
    return banner.status === 'active';
  };

  return (
    <Modal
      title={
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <EyeOutlined style={{ fontSize: 20 }} />
          <div>
            <div>轮播图预览</div>
            <div style={{ fontSize: '12px', color: '#666' }}>{banner.title}</div>
          </div>
        </div>
      }
      open={visible}
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
      ]}
      width={800}
      destroyOnClose
    >
      <div style={{ marginBottom: 24 }}>
        {/* 轮播图预览 */}
        <div style={{ 
          background: '#f5f5f5', 
          padding: 20, 
          borderRadius: 8, 
          textAlign: 'center',
          marginBottom: 24 
        }}>
          <div style={{ marginBottom: 16 }}>
            <Tag color={positionColorMap[banner.position]}>
              {positionMap[banner.position]}
            </Tag>
            <Tag color={statusColorMap[banner.status]}>
              {statusMap[banner.status]}
            </Tag>
            {isActive() && (
              <Tag color="green">当前生效</Tag>
            )}
          </div>
          
          <div style={{ 
            position: 'relative', 
            display: 'inline-block',
            maxWidth: '100%'
          }}>
            <Image
              src={banner.image}
              alt={banner.alt_text || banner.title}
              style={{ 
                maxWidth: '100%', 
                maxHeight: 300, 
                borderRadius: 8,
                boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
              }}
              fallback=""
            />
            
            {banner.link_type !== 'none' && (
              <div style={{
                position: 'absolute',
                top: 8,
                right: 8,
                background: 'rgba(0,0,0,0.6)',
                color: 'white',
                padding: '4px 8px',
                borderRadius: 4,
                fontSize: '12px',
                display: 'flex',
                alignItems: 'center',
                gap: 4
              }}>
                <LinkOutlined />
                可点击
              </div>
            )}
          </div>
          
          <div style={{ marginTop: 16 }}>
            <h3 style={{ margin: 0, color: '#333' }}>{banner.title}</h3>
            {banner.description && (
              <p style={{ margin: '8px 0 0 0', color: '#666' }}>
                {banner.description}
              </p>
            )}
          </div>
        </div>

        {/* 统计信息 */}
        <Row gutter={16} style={{ marginBottom: 24 }}>
          <Col span={8}>
            <Card>
              <Statistic
                title="点击次数"
                value={banner.click_count || 0}
                prefix={<EyeOutlined />}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="排序权重"
                value={banner.sort_order || 0}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="有效期状态"
                value={isActive() ? '生效中' : '未生效'}
                valueStyle={{ 
                  color: isActive() ? '#52c41a' : '#ff4d4f' 
                }}
                prefix={<ClockCircleOutlined />}
              />
            </Card>
          </Col>
        </Row>

        {/* 详细信息 */}
        <Descriptions title="详细信息" column={2} bordered>
          <Descriptions.Item label="轮播图ID">{banner.id}</Descriptions.Item>
          <Descriptions.Item label="标题">{banner.title}</Descriptions.Item>
          <Descriptions.Item label="显示位置">
            <Tag color={positionColorMap[banner.position]}>
              {positionMap[banner.position]}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="状态">
            <Tag color={statusColorMap[banner.status]}>
              {statusMap[banner.status]}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="排序" span={2}>
            {banner.sort_order}
          </Descriptions.Item>
          <Descriptions.Item label="描述" span={2}>
            {banner.description || '-'}
          </Descriptions.Item>
          <Descriptions.Item label="链接类型">
            {linkTypeMap[banner.link_type]}
          </Descriptions.Item>
          <Descriptions.Item label="链接地址">
            {getLinkInfo()}
          </Descriptions.Item>
          <Descriptions.Item label="新窗口打开">
            {banner.is_new_window ? '是' : '否'}
          </Descriptions.Item>
          <Descriptions.Item label="Alt文本">
            {banner.alt_text || '-'}
          </Descriptions.Item>
          <Descriptions.Item label="开始时间">
            {banner.start_time ? moment(banner.start_time).format('YYYY-MM-DD HH:mm:ss') : '-'}
          </Descriptions.Item>
          <Descriptions.Item label="结束时间">
            {banner.end_time ? moment(banner.end_time).format('YYYY-MM-DD HH:mm:ss') : '-'}
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">
            {moment(banner.created_at).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item label="更新时间">
            {moment(banner.updated_at).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item label="关键词" span={2}>
            {banner.keywords && banner.keywords.length > 0 ? (
              <Space wrap>
                {banner.keywords.map((keyword, index) => (
                  <Tag key={index}>{keyword}</Tag>
                ))}
              </Space>
            ) : '-'}
          </Descriptions.Item>
        </Descriptions>

        {/* 移动端预览提示 */}
        <div style={{ 
          marginTop: 24, 
          padding: 16, 
          background: '#f6ffed', 
          border: '1px solid #b7eb8f',
          borderRadius: 6 
        }}>
          <h4 style={{ margin: '0 0 8px 0', color: '#52c41a' }}>预览说明</h4>
          <ul style={{ margin: 0, paddingLeft: 20, color: '#666' }}>
            <li>此预览为桌面端效果，实际移动端显示可能有所差异</li>
            <li>建议轮播图尺寸为 750x375px，以确保在各设备上的显示效果</li>
            <li>链接功能在预览中不可点击，实际使用时会根据配置进行跳转</li>
            <li>轮播图的显示顺序按排序值从小到大排列</li>
          </ul>
        </div>
      </div>
    </Modal>
  );
};

export default BannerPreview;
